<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>更新书籍</title>
    <!-- 添加 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 添加 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-md">
    <div class="bg-white rounded-xl shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">更新书籍</h2>

        <form id="app" class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">ID：</label>
                <input type="text" id="ID" v-model="book.ID" readonly
                       class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">书名：</label>
                <input type="text" v-model="book.name"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">作者：</label>
                <input type="text" v-model="book.author"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">出版日期：</label>
                <input type="date" v-model="book.date"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">出版社：</label>
                <input type="text" v-model="book.press"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">价格：</label>
                <input type="number" v-model.number="book.price" min="0" step="0.01"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">状态：</label>
                <select v-model="book.statu"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <option value="1">在馆</option>
                    <option value="0">已借出</option>
                </select>
            </div>

            <div class="flex space-x-4 pt-2">
                <button type="button" @click="update"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500/50">
                    <i class="fa fa-save mr-1"></i> 更新
                </button>
                <button type="reset"
                        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400/50">
                    <i class="fa fa-refresh mr-1"></i> 重置
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    // 从URL参数获取bookId
    function getBookIdFromUrl() {
        const params = new URLSearchParams(window.location.search);
        return params.get('ID');
    }

    const app = Vue.createApp({
        data() {
            return {
                book: {
                    ID: getBookIdFromUrl() || '',
                    name: '',
                    author: '',
                    date: '',
                    press: '',
                    price: 0,
                    statu: '1'
                }
            }
        },
        mounted() {
            // 如果有ID，尝试加载书籍数据
            if (this.book.ID) {
                this.loadBookData();
            }
        },
        methods: {
            loadBookData() {
                axios.get(`/dem1/book/${this.book.ID}`)
                    .then(response => {
                        const data = response.data;
                        // 强制映射字段（根据后端实际返回调整）
                        // this.book.ID = data.id || data.ID; // 兼容大小写
                        //不能更新此ID字段，会造成
                        this.book.name = data.name;
                        this.book.author = data.author;
                        this.book.date = data.date;
                        this.book.press = data.press;
                        this.book.price = data.price;
                        this.book.statu = (data.statu !== undefined) ? data.statu.toString() : '1';
                    })
                    .catch(/* ... */);
            },
            update() {
                // 简单验证
                if (!this.book.name) {
                    return alert("书名不能为空");
                }
                if (!this.book.author) {
                    return alert("作者不能为空");
                }
                if (!this.book.date) {
                    return alert("出版日期不能为空");
                }
                if (!this.book.press) {
                    return alert("出版社不能为空");
                }
                if (this.book.price <= 0) {
                    return alert("价格必须大于0");
                }

                axios({
                    method: 'put',
                    url: '/dem1/book',
                    data: this.book
                }).then(response => {
                    let count = response.data;
                    if (count > 0) {
                        alert("修改成功");
                        window.location.href = "/dem1/test/bookList.html";
                    } else {
                        alert("修改失败，可能书籍ID不存在");
                    }
                }).catch(error => {
                    console.error("请求失败：", error);
                    alert("网络错误，请重试");
                });
            }
        }
    }).mount("#app");
</script>
</body>
</html>